<template>
    <el-divider/>
    <span>患者信息：</span>
    <el-tag class="ml-2">姓名：{{ patientInfo.realName }}</el-tag>
    <el-tag class="ml-2">病历号：{{ patientInfo.caseNumber }}</el-tag>
    <el-tag class="ml-2">年龄：{{ patientInfo.age }}</el-tag>
    <el-tag class="ml-2">性别：{{ patientInfo.gender }}</el-tag>
    <el-divider/>
    <el-icon>
        <DocumentChecked/>
    </el-icon>
    <span>开设处方</span>
    <el-divider/>
  <!--
        查询病人
        -->
    <el-table :data="patientInfoList" stripe table-layout="auto" height="250">
        <el-table-column label="患者病历号">
            <template #default="scope">
                <div style="display: flex; align-items: center">
                    <span style="margin-left: 10px">{{ scope.row.caseNumber }}</span>
                </div>
            </template>
        </el-table-column>
        <el-table-column label="患者姓名">
            <template #default="scope">
                <div style="display: flex; align-items: center">
                    <span style="margin-left: 10px">{{ scope.row.realName }}</span>
                </div>
            </template>
        </el-table-column>
        <el-table-column label="性别">
            <template #default="scope">
                <div style="display: flex; align-items: center">
                    <span style="margin-left: 10px">{{ scope.row.gender }}</span>
                </div>
            </template>
        </el-table-column>
        <el-table-column label="年龄">
            <template #default="scope">
                <div style="display: flex; align-items: center">
                    <span style="margin-left: 10px">{{ scope.row.age }}</span>
                    <span style="margin-left: 10px">{{ scope.row.ageType }}</span>
                </div>
            </template>
        </el-table-column>
        <el-table-column label="病历本">
            <template #default="scope">
                <div style="display: flex; align-items: center">
                    <span style="margin-left: 10px">{{ scope.row.isBook }}</span>
                </div>
            </template>
        </el-table-column>
        <el-table-column label="操作">
            <template #default="scope">
                <el-button size="small" @click="selectPatient(scope.row)">选择患者</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-divider/>
    <el-tag>
        <el-icon>
            <Goods/>
        </el-icon>
        项目金额：{{ totalPrice }}元
    </el-tag>
    <el-table :data="selectedDrugList" :border="parentBorder" style="width: 100%">
        <el-table-column type="expand">
            <template #default="props">
                <div m="4">
                    <el-table :data="props.row.family" :border="childBorder">
                        <!--
                        子菜单-->
                    </el-table>
                </div>
            </template>
        </el-table-column>
        <el-table-column label="药品名称" prop="drugName"/>
        <el-table-column label="药品规格" prop="drugFormat"/>
        <el-table-column label="单价" prop="drugUnit"/>
        <el-table-column label="用法用量">
            <template #default="scope">
                <el-input v-model="scope.row.drugUsage"/>
            </template>
        </el-table-column>
        <el-table-column label="数量">
            <template #default="scope">
                <el-input-number v-model="scope.row.drugNumber"/>
            </template>
        </el-table-column>
        <el-table-column align="right">
            <template #header>
                <el-link type="primary">删除</el-link>
                <el-link type="primary" @click="isGetPatient">增加
                </el-link>
            </template>
        </el-table-column>
    </el-table>
    <el-dialog v-model="dialogTableVisible"
               title="疾病搜索" width="80%"
               @close="drugInfoAddProp"
    >
        <div class="dialogBox">
            <div>
                <el-input
                        v-model="searchInfo"
                        placeholder="Please input"
                        class="input-with-select">
                    <!-- 搜索选择-->
                    <template #prepend>
                        <el-select v-model="searchSelect" placeholder="请选择搜索内容" style="width: 115px">
                            <el-option label="药品名称" value="drugName"/>
                            <el-option label="拼音助记码" value="mnemonicCode"/>
                        </el-select>
                    </template>
                </el-input>
                <el-button type="primary" @click="queryDrugByCondition()">搜索</el-button>
            </div>
            <div>
                <el-divider/>
                <el-table
                        ref="multipleTableRef"
                        style="width: 100%"
                        height="350"
                        @select="getSelectRows"
                        @selectAll="getSelectRows"
                        :data="drugInfoList"
                >
                    <el-table-column type="selection" width="55"/>
                    <el-table-column property="drugCode" label="药品编码"/>
                    <el-table-column property="drugName" label="药品名称"/>
                    <el-table-column property="drugFormat" label="药品规格"/>
                    <el-table-column property="drugPrice" label="药品单价"/>
                    <el-table-column property="drugUnit" label="包装单位"/>
                    <el-table-column property="manufacturer" label="生产厂家"/>
                </el-table>
            </div>
            <div class="demo-pagination-block">
                <el-pagination
                        v-model:current-page="currentPage"
                        v-model:page-size="pageSize"
                        :page-sizes="[2,5,10]"
                        :disabled="disabled"
                        :background="background"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="drugNum"
                        @size-change="handleSizeChange()"
                        @current-change="handleCurrentChange()"
                />
            </div>
        </div>
    </el-dialog>
    <el-divider/>
    <el-button type="primary" @click="savePres">开立处方</el-button>
    <el-button type="primary" @click="clearDrugList">重置处方</el-button>
</template>

<script setup>
import {ref, reactive, provide} from "vue";
import {DocumentChecked, Goods, Search} from '@element-plus/icons-vue'
import axios from "axios";

const currentPage = ref(1)

const pageSize = ref(5)
const background = ref(false)
const disabled = ref(false)
const dialogTableVisible = ref(false)
const drugNum = ref(0)
//选择的患者信息
const patientInfo = ref({
    caseNumber: '',
    realName: '',
    age: '',
    gender: ''
})
//选择的药品总结额
const totalPrice = ref(0)

//当前医生中正在看诊的患者列表
const patientInfoList = ref([])
//当前登录医生的信息
const loginEmp = ref({
    id: '1',
    realname: '扁鹊',
})

const parentBorder = ref(false)
const childBorder = ref(false)
//药品搜索中选择的内容
const searchSelect = ref('')
//搜索药品时的信息
const drugInfo = ref({
    mnemonicCode: '',
    drugName: ''
})

const searchInfo = ref('')
const drugInfoList = ref([])
//已选择的药品表
const selectedDrugList = ref([])

//查询当前医生的状态为就诊中的患者列表
axios({
    method: 'get',
    url: 'http://localhost:8092/register/queryRegisterByStateAndDoc/' + 2 + '/' + loginEmp.value.id
}).then(resp => {
    patientInfoList.value = resp.data.data
})

//选择一个患者
function selectPatient(val) {
    patientInfo.value = val
}

function getSelectRows(selection) {

    console.log(selection)
    selection.forEach(a => {
        a.drugId = a.id
    })
    let temp;
    temp = selection
    selectedDrugList.value = temp
    console.log(selectedDrugList.value)

}

//按条件搜索药品信息
function queryDrugByCondition() {
    axios({
        method: 'get',
        url: 'http://localhost:8091/drugInfo/queryDrugNum'
    }).then(resp => {
        drugNum.value = resp.data.data
    })
    drugInfo.value[searchSelect.value] = searchInfo.value
    axios({
        method: 'post',
        url: 'http://localhost:8091/drugInfo/queryDrugByPageAndCondition/' + currentPage.value + '/' + pageSize.value,
        data: drugInfo.value
    }).then(resp => {
        console.log(resp.data.data)
        drugInfoList.value = resp.data.data
    })

}

function drugInfoAddProp() {
    console.log(patientInfo.value)
    console.log(selectedDrugList.value)
    selectedDrugList.value.forEach(drugInfo => {
        //循环把处方表中的相关字段名称添加到药品信息中
        drugInfo.drugUsage = '';
        drugInfo.drugNumber = 0;
        drugInfo.drugState = ''
        drugInfo.creationTime = ''
        drugInfo.registerId = patientInfo.value.id
    })
    console.log(selectedDrugList.value)
    searchInfo.value = ''
    //清空搜索到的信息
    drugInfoList.value = []
}

//点击开立处方
function savePres() {
    //发送请求向数据库添加数据
    console.log(selectedDrugList.value)
    axios({
        method: 'post',
        url: 'http://localhost:8092/prescription/addPrescriptionList',
        data: selectedDrugList.value
    }).then(resp => {
        if (resp.data.success) {
            window.alert("提交成功")
            //清空信息
            selectedDrugList.value = []
            //选择的患者信息
            patientInfo.value = {
                caseNumber: '',
                realName: '',
                age: '',
                gender: ''
            }
            //清空选择的药品信息
            drugInfoList.value = []
        }
    })
}

function isGetPatient() {
    if (patientInfo.value.id == undefined) {
        window.alert("请先选择患者")
        return
    }
    dialogTableVisible.value = true;
}

function clearDrugList() {
    //清空选择的药品信息
    drugInfoList.value = []
    //清空信息
    selectedDrugList.value = []
}

function handleSizeChange() {
    queryDrugByCondition()
}

function handleCurrentChange() {
    queryDrugByCondition()
}
</script>

<style scoped>
.el-link {
    margin-right: 10px;
}

.el-link .el-icon--right.el-icon {
    vertical-align: text-bottom;
}

.el-button--text {
    margin-right: 15px;
}


.dialog-footer button:first-child {
    margin-right: 10px;
}

.demo-pagination-block + .demo-pagination-block {
    margin-top: 10px;
}

.demo-pagination-block .demonstration {
    margin-bottom: 16px;
}

.demo-pagination-block + .demo-pagination-block {
    margin-top: 10px;
}

.demo-pagination-block .demonstration {
    margin-bottom: 16px;
}

</style>